<template>
  <div class="assay-root">

    <el-row :gutter="10" class="mb8 z-header">
      <el-col :span="1.5">
        <el-button
          type="primary"
          plain
          icon="el-icon-plus"
          size="mini"
          @click="handleAdd"
        >新增
        </el-button>
      </el-col>

      <el-col :span="1.5">
        <el-button
          type="primary"
          plain
          icon="el-icon-delete"
          size="mini"
          @click="handleExport"
        >导出
        </el-button>
      </el-col>

      <el-col :span="1.5">
        <el-button
          type="primary"
          plain
          icon="el-icon-plus"
          size="mini"
          @click="back">
          返回
        </el-button>
      </el-col>
    </el-row>


    <el-table class="grass-table" v-loading="loading" :data="dataList" height="calc(100% - 120px)">

      <el-table-column type="index" width="50" label="序号"/>

      <el-table-column label="种子编号" align="center" prop="germplasmId">
        <template slot-scope="scope">
          <el-tooltip class="item" effect="dark" :content="scope.row.germplasmId" placement="top-start">
            <div class="s-t-item">{{ scope.row.germplasmId }}</div>
          </el-tooltip>
        </template>
      </el-table-column>
      <el-table-column label="编号" align="center" prop="testId">
        <template slot-scope="scope">
          <el-tooltip class="item" effect="dark" :content="scope.row.testId" placement="top-start">
            <div class="s-t-item">{{ scope.row.testId }}</div>
          </el-tooltip>
        </template>
      </el-table-column>
      <el-table-column label="发芽率" align="center" prop="germinationRate">
        <template slot-scope="scope">
          <el-tooltip class="item" effect="dark"
                      :content="scope.row.germinationRate == null?'':scope.row.germinationRate.toString()"
                      placement="top-start">
            <div class="s-t-item">{{ scope.row.germinationRate }}</div>
          </el-tooltip>
        </template>
      </el-table-column>
      <el-table-column label="生活力" align="center" prop="lifeForce">
        <template slot-scope="scope">
          <el-tooltip class="item" effect="dark" :content="scope.row.lifeForce==null?'':scope.row.lifeForce.toString()"
                      placement="top-start">
            <div class="s-t-item">{{ scope.row.lifeForce }}</div>
          </el-tooltip>
        </template>
      </el-table-column>
      <el-table-column label="重量" align="center" prop="weight">
        <template slot-scope="scope">
          <el-tooltip class="item" effect="dark" :content="scope.row.weight==null?'':scope.row.lifeForce.toString()"
                      placement="top-start">
            <div class="s-t-item">{{ scope.row.weight }}</div>
          </el-tooltip>
        </template>
      </el-table-column>
      <el-table-column label="水分" align="center" prop="wet">
        <template slot-scope="scope">
          <el-tooltip class="item" effect="dark" :content="scope.row.wet==null?'':scope.row.lifeForce.toString()"
                      placement="top-start">
            <div class="s-t-item">{{ scope.row.wet }}</div>
          </el-tooltip>
        </template>
      </el-table-column>
      <el-table-column label="净度" align="center" prop="clarity">
        <template slot-scope="scope">
          <el-tooltip class="item" effect="dark" :content="scope.row.clarity==null?'':scope.row.lifeForce.toString()"
                      placement="top-start">
            <div class="s-t-item">{{ scope.row.clarity }}</div>
          </el-tooltip>
        </template>
      </el-table-column>
      <el-table-column label="其他植物种子数" align="center" prop="otherSeed" width="150">
        <template slot-scope="scope">
          <el-tooltip class="item" effect="dark" :content="scope.row.otherSeed==null?'':scope.row.lifeForce.toString()"
                      placement="top-start">
            <div class="s-t-item">{{ scope.row.otherSeed }}</div>
          </el-tooltip>
        </template>
      </el-table-column>
      <el-table-column label="健康" align="center" prop="health">
        <template slot-scope="scope">
          <el-tooltip class="item" effect="dark" :content="scope.row.health==null?'':scope.row.lifeForce.toString()"
                      placement="top-start">
            <div class="s-t-item">{{ scope.row.health }}</div>
          </el-tooltip>
        </template>
      </el-table-column>
      <el-table-column label="饱满度" align="center" prop="plumpness">
        <template slot-scope="scope">
          <el-tooltip class="item" effect="dark" :content="scope.row.plumpness==null?'':scope.row.lifeForce.toString()"
                      placement="top-start">
            <div class="s-t-item">{{ scope.row.plumpness }}</div>
          </el-tooltip>
        </template>
      </el-table-column>
      <el-table-column label="是否在检定期" align="center" prop="isIdentificationPeriod">
        <template slot-scope="scope">
          <el-tooltip class="item" effect="dark"
                      :content="scope.row.isIdentificationPeriod==null?'':scope.row.lifeForce.toString()"
                      placement="top-start">
            <div class="s-t-item">{{ scope.row.isIdentificationPeriod }}</div>
          </el-tooltip>
        </template>
      </el-table-column>
      <el-table-column label="检测者" align="center" prop="testingNo">
        <template slot-scope="scope">
          <el-tooltip class="item" effect="dark" :content="scope.row.testingNo==null?'':scope.row.lifeForce.toString()"
                      placement="top-start">
            <div class="s-t-item">{{ scope.row.testingNo }}</div>
          </el-tooltip>
        </template>
      </el-table-column>
      <el-table-column label="检测时间" align="center" prop="testingDate">
        <template slot-scope="scope">
          <el-tooltip class="item" effect="dark" :content="scope.row.testingDate" placement="top-start">
            <div class="s-t-item">{{ parseTime(scope.row.testingDate, '{y}-{m}-{d}') }}</div>
          </el-tooltip>
        </template>
      </el-table-column>
      <el-table-column label="校核者" align="center" prop="checkNo">
        <template slot-scope="scope">
          <el-tooltip class="item" effect="dark" :content="scope.row.checkNo" placement="top-start">
            <div class="s-t-item">{{ scope.row.checkNo }}</div>
          </el-tooltip>
        </template>
      </el-table-column>
      <el-table-column label="校核时间" align="center" prop="checkDate">
        <template slot-scope="scope">
          <el-tooltip class="item" effect="dark" :content="scope.row.checkDate" placement="top-start">
            <div class="s-t-item">{{ parseTime(scope.row.checkDate, '{y}-{m}-{d}') }}</div>
          </el-tooltip>
        </template>
      </el-table-column>
      <el-table-column label="上传时间" align="center" prop="createTime" width="150">
        <template slot-scope="scope">
          <el-tooltip class="item" effect="dark" :content="scope.row.createTime" placement="top-start">
            <div class="s-t-item">{{ parseTime(scope.row.createTime) }}</div>
          </el-tooltip>
        </template>
      </el-table-column>


      <!--      <el-table-column label="操作" align="center" class-name="small-padding fixed-width">-->
      <!--        <template slot-scope="scope">-->
      <!--          <el-button-->
      <!--            size="mini"-->
      <!--            type="text"-->
      <!--            icon="el-icon-edit"-->
      <!--            @click="handleUpdate(scope.row)"-->
      <!--          >修改-->
      <!--          </el-button>-->
      <!--        </template>-->
      <!--      </el-table-column>-->

    </el-table>


    <pagination
      :total="total"
      :page.sync="queryParams.pageNum"
      :limit.sync="queryParams.pageSize"
      @pagination="getList"/>


    <el-dialog :title="title" :visible.sync="open" width="500px" append-to-body>

      <div class="zz-ass-f-container">
        <el-scrollbar>
          <el-form ref="formRef" :model="form" :rules="rules" label-width="80px">

            <el-form-item label="发芽率" prop="germinationRate">
              <el-input type="number" v-model="form.germinationRate"/>
            </el-form-item>

            <el-form-item label="生活力" prop="lifeForce">
              <el-input v-model="form.lifeForce"/>
            </el-form-item>

            <el-form-item label="重量" prop="weight">
              <el-input v-model="form.weight"/>
            </el-form-item>

            <el-form-item label="水分" prop="wet">
              <el-input v-model="form.wet"/>
            </el-form-item>

            <el-form-item label="净度" prop="clarity">
              <el-input v-model="form.clarity"/>
            </el-form-item>

            <el-form-item label="其他植物种子数" prop="otherSeed">
              <el-input type="number" v-model="form.otherSeed"/>
            </el-form-item>

            <el-form-item label="健康" prop="health">
              <el-input v-model="form.health"/>
            </el-form-item>

            <el-form-item label="饱满度" prop="plumpness">
              <el-input v-model="form.plumpness"/>
            </el-form-item>

            <el-form-item label="是否在检定期" prop="isIdentificationPeriod">
              <el-input v-model="form.isIdentificationPeriod"/>
            </el-form-item>

            <el-form-item label="检测者" prop="testingNo">
              <el-input v-model="form.testingNo"/>
            </el-form-item>

            <el-form-item label="检测时间" prop="testingDate">
              <el-date-picker
                v-model="form.testingDate"
                type="date"
                value-format="yyyy-MM-dd"
                placeholder="选择日期">
              </el-date-picker>
            </el-form-item>

            <el-form-item label="校核者" prop="checkNo">
              <el-input v-model="form.checkNo"/>
            </el-form-item>

            <el-form-item label="校核时间" prop="checkDate">
              <el-date-picker
                v-model="form.checkDate"
                type="date"
                value-format="yyyy-MM-dd"
                placeholder="选择日期">
              </el-date-picker>
            </el-form-item>

          </el-form>
        </el-scrollbar>
      </div>

      <div slot="footer" class="dialog-footer">
        <el-button type="primary" @click="submitForm">确 定</el-button>
        <el-button @click="cancel">取 消</el-button>
      </div>
    </el-dialog>

  </div>
</template>

<script>
  import { reactive, toRefs, onMounted, ref, computed } from '@vue/composition-api'
  import { Message, MessageBox } from 'element-ui'
  import store from '@/store'
  import router from '@/router'
  import { addAutData, editAutData, exportAutData, getAutData, getAutListByCltId } from '@/api/industry/lab'
  import { getField } from '@/api/field/field'

  export default {
    name: 'assay',
    props: {},
    components: {},
    setup(props, content) {

      let {} = props

      let { history: { current: { query: { cltId, germplasmId, labId, pageNum, pageSize, queryType, showType, proId } } } } = router

      const data = reactive({
        open: false,
        showSearch: true,
        queryParams: {
          pageNum: 1,
          pageSize: 10,
          cltId
        },
        dataList: [],
        total: 0,
        loading: false,
        title: '',
        form: {
          cltId,
          germplasmId: null,
          testId: null,
          germinationRate: null,
          lifeForce: null,
          weight: null,
          wet: null,
          clarity: null,
          otherSeed: null,
          health: null,
          plumpness: null,
          isIdentificationPeriod: null,
          testingNo: null,
          testingDate: null,
          checkNo: null,
          checkDate: null
        },
        rules: {
          germinationRate: [
            { required: true, message: '发芽率不能为空', trigger: 'blur' }
          ],
          lifeForce: [
            { required: true, message: '生活力不能为空', trigger: 'blur' }
          ],
          weight: [
            { required: true, message: '重量不能为空', trigger: 'blur' }
          ],
          wet: [
            { required: true, message: '水分不能为空', trigger: 'blur' }
          ],
          clarity: [
            { required: true, message: '净度不能为空', trigger: 'blur' }
          ],
          otherSeed: [
            { required: true, message: '其他植物种子数不能为空', trigger: 'blur' }
          ],
          health: [
            { required: true, message: '健康不能为空', trigger: 'blur' }
          ],
          plumpness: [
            { required: true, message: '饱满度不能为空', trigger: 'blur' }
          ],
          isIdentificationPeriod: [
            { required: true, message: '是否在检定期不能为空', trigger: 'blur' }
          ],
          testingNo: [
            { required: true, message: '检测者不能为空', trigger: 'blur' }
          ],
          testingDate: [
            { required: true, message: '检测时间不能为空', trigger: 'blur' }
          ],
          checkNo: [
            { required: true, message: '校核者不能为空', trigger: 'blur' }
          ],
          checkDate: [
            { required: true, message: '校核时间不能为空', trigger: 'blur' }
          ]
        }
      })

      const back = () => {
        router.push({ path: '/lab', query: { labId, pageNum, pageSize, queryType, showType, proId } })
      }

      // 表单重置
      const reset = () => {
        data.form = {
          cltId,
          germplasmId: null,
          testId: null,
          germinationRate: null,
          lifeForce: null,
          weight: null,
          wet: null,
          clarity: null,
          otherSeed: null,
          health: null,
          plumpness: null,
          isIdentificationPeriod: null,
          testingNo: null,
          testingDate: null,
          checkNo: null,
          checkDate: null
        }
      }

      /** 新增按钮操作 */
      const handleAdd = () => {
        reset()
        data.open = true
        data.title = '新增化验数据'
      }

      /** 修改按钮操作 */
      const handleUpdate = row => {
        reset()
        const testId = row.testId
        getAutData(testId).then(response => {
          data.form = response.data
          data.open = true
          data.title = '修改化验数据'
          data.opne = true
        })
      }

      const handleExport = () => {
        MessageBox.confirm('是否确认导出所有类型数据项?', '警告', {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'warning'
        }).then(function() {
          return exportAutData(data.queryParams)
        }).then(response => {
        })
      }

      const getList = () => {
        data.loading = true
        getAutListByCltId(data.queryParams).then(response => {
          data.dataList = response.rows.map(item => {
            item.germplasmId = germplasmId
            return item
          })
          data.total = response.total
          data.loading = false
        })
      }

      const submitForm = () => {
        content.refs.formRef.validate(async valid => {
          if (valid) {
            let { form } = data
            if (form.testId != null) {
              await editAutData(form)
            } else {
              await addAutData(form)
            }
            data.open = false
            getList()
            reset()
          }
        })
      }

      // 取消按钮
      const cancel = () => {
        data.open = false
        reset()
      }

      getList()

      return { ...toRefs(data), back, handleAdd, handleExport, getList, handleUpdate, cancel, submitForm }
    }
  }
</script>

<style scoped lang="scss">
  $full: 100%;
  .assay-root {
    width: 100%;
    height: 100%;
    padding: 10px;

    .z-header {
      display: flex;
      flex-direction: row;
      justify-content: flex-end;
    }

    .el-table {
      .el-table__body-wrapper {
        .el-table__body {
          .el-table__row {
            .cell {
              .s-t-item {
                width: 100%;
                height: 100%;
                overflow: hidden;
                text-overflow: ellipsis;
                white-space: nowrap;
              }
            }
          }
        }
      }
    }


    .pagination-container {
      height: 53px;
    }
  }
</style>
<style lang="scss">
  .zz-ass-f-container {
    height: 400px;
  }
</style>
